<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品中心</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入本页面css样式表 -->
    <link rel="stylesheet" href="./css/product-list.css">
</head>

<body>
    <!-- 头部开始 -->
    <header class="header">
        <!-- 工具条开始 -->
        <div class="toolbar-bg">
            <div class="toolbar">
                <p class="fl">全国服务热线：400-000-0000</p>
                <span class="fr">
                    <a href="javascript:;">设为首页</a>
                    <a href="javascript:;">加入收藏</a>
                </span>
            </div>
        </div>
        <!-- 工具条结束 -->
        <!-- logo和导航开始 -->
        <div class="logo-nav-bg">
            <div class="logo-nav">
                <a href="index.html" class="logo">
                    <img src="images/logo.png" alt="">
                </a>
                <ul class="nav">
                    <li><a href="" class="cur"><span>首页 Home</span></a></li>
                    <li><a href=""><span>关于我们About</span></a></li>
                    <li><a href=""><span>关于我们 About</span></a></li>
                    <li><a href=""><span>关于我们 About</span></a></li>
                    <li><a href=""><span>关于我们About</span></a></li>
                    <li><a href=""><span>关于我们 About</span></a></li>
                    <li><a href=""><span>关于我们 About</span></a></li>
                </ul>
            </div>
        </div>
        <!-- logo和导航结束 -->
    </header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <section class="content">
        <!-- 轮播图开始 -->
        <section class="banner">
            <a href="" class="banner-link">
                <img src="images/banner2.png" width="100%"  alt="">
            </a>
        </section>
        <!-- 轮播图结束 -->
        <!-- 产品内容开始 -->
        <section class="product">
            <section class="bread-crumb">
                <a href="index.html">首页</a>
                >
                <span>新品发布</span>
            </section>
            <section class="nav">
                <ul>
                    <li><a href="" class="cur">百万高清系列</a></li>
                    <li><a href="">标清系列</a></li>
                    <li><a href="">户外防水系列</a></li>
                    <li><a href="">室内系列</a></li>
                </ul>
            </section>
            <section class="search-box">
                <form action="" method="">
                    <input type="text" name="keyword" value="" placeholder="搜索产品">
                    <input type="submit" value="">
                </form>
            </section>
            <div class="clear"></div>
            <section class="product-display">
                <ul>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/001.jpg" alt="">
                            <h4>S6202Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/002.jpg" alt="">
                            <h4>S6223Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/003.jpg" alt="">
                            <h4>S6208Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/004.jpg" alt="">
                            <h4>S6211Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/005.jpg" alt="">
                            <h4>S6262Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/006.jpg" alt="">
                            <h4>S6256Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/007.jpg" alt="">
                            <h4>S6202Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/008.jpg" alt="">
                            <h4>S6202Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascripy:;">
                            <img src="images/009.jpg" alt="">
                            <h4>S6202Y-WR</h4>
                            <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
                        </a>
                    </li>
                </ul>
            </section>
            <div class="clear"></div>
            <section class="page">
                <a href="" class="prev">上一页</a>
                <span href="" class="cur">1</span>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="">5</a>
                <a href="">6</a>
                <a href="" class="next">下一页</a>
            </section>
        </section>
        <!-- 产品内容结束 -->

    </section>
    <!-- 内容结束 -->

    <!-- 尾部开始-->
    <footer class="footer">
        <div class="footer-blue">
            <p>关注我们:<img src="images/share2.jpg" alt=""></p>
            <a href="">网站首页</a>
            <span></span>
            <a href="">新闻动态</a>
            <span></span>
            <a href="">关于我们</a>
            <span></span>
            <a href="">团队风采</a>
            <span></span>
            <a href="">联系我们</a>
            <span></span>
            <a href="">在线留言</a>
        </div>
        <div class="footer-purple">
            <p>©2015 TK科技有限公司 版权所有沪ICP证13022560号-7 All Rights Reserved</p>
        </div>
    </footer>
    <!-- 尾部结束 -->
</body>

</html>